<template>
    <div style="height: 200px;width: 100%;position: relative;">
        <van-nav-bar title="春雨医生" left-text="" left-arrow @click="onClickLeft" />
        <div class="bing">
            <div class="bingren">
                <p>病例所属人 <span style="color: #898989;position: absolute;left: 100px;width: 200px;">{{ name }}</span>
                    <span style="color: #898989;position: absolute;left: 200px;width: 200px;">({{ relation }})</span>
                </p>
                <p class="p1">记录时间 <span
                        style="color: #898989;position: absolute;left: 100px;width: 200px;line-height: 30px;">
                        2024-12-24</span></p>
            </div>
            <div class="tab" style="position: absolute;margin-top: 115px;width: 100%;">
                <van-tabs>
                    <van-tab title="健康备忘">
                        <div style="background-color: #ffff;height: 300px;width: 100%;">
                            <p style="color: #b0b0b0;font-size: 14px;margin-left: 31px;margin-top: 15px;">
                                健康相关信息随手拍（最多可以添加50张）</p>
                            <label for="filess"
                                style="line-height: 3rem;text-align: center;left: 4rem;position: absolute;color: #e2e2e2;height: 90px;width: 95px;background-color: white;line-height: 90px;margin-left: 80px; border: 2px dashed #e2e2e2;font-size: 25px;">+</label>
                            <input type="file" id="filess" @change="handleFileChange" style="display: none"
                                ref="fileInput" accept="image/*" />
                            <img :src="userInfo.avatar" alt="" style="width: 95px;height: 90px;margin-left: 31px;">
                            <p style="margin-left: 31px;">备注</p>
                            <p style="margin-left: 31px;">记录日常需备忘的治疗与护理方法，生活注意事项、药品药方等信息</p>
                            <textarea name="" id="" cols="30"
                                style="width: 85%;height:180px;border: none;background: #f7f7f7;margin-left: 31px;color: #000;line-height: 1px;">

                            </textarea>
                        </div>
                    </van-tab>
                    <van-tab title="门诊记录">
                        <div style="background-color: #ffff;height: 300px;width: 100%;">

                            <p style="color: #b0b0b0;font-size: 14px;margin-left: 31px;margin-top: 15px;">
                                上传照片，如检查单、CT、病例、患处、药品等,春雨保证您的隐私安全(最多可添加50张)</p>
                            <label for="filess"
                                style="line-height: 3rem;text-align: center;left: 4rem;position: absolute;color: #e2e2e2;height: 90px;width: 95px;background-color: white;line-height: 90px;margin-left: 80px; border: 2px dashed #e2e2e2;font-size: 25px;">+</label>
                            <input type="file" id="filess" @change="handleFileChange" style="display: none"
                                ref="fileInput" accept="image/*" />
                            <img :src="userInfo.avatar" alt="" style="width: 95px;height: 90px;margin-left: 31px;">
                            <p style="margin-left: 31px;">备注</p>
                            <p style="margin-left: 31px;">记录日常需备忘的治疗与护理方法，生活注意事项、药品药方等信息</p>
                            <textarea name="" id="" cols="30"
                                style="width: 85%;height:180px;border: none;background: #f7f7f7;margin-left: 31px;color: #000;line-height: 1px;">

                            </textarea>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
            <div style="position: relative;">
                <button class="btn">保存</button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const phone = ref(localStorage.getItem('phone',))
const name = ref(localStorage.getItem('name',))
const relation = ref(localStorage.getItem('relation',))
console.log('name', name.value);
console.log('phone', phone.value);
console.log('relation', relation.value);
const onClickLeft = () => {
    router.push({ path: "/jiankang" })
}
const fileInput = ref();
const userInfo = ref(JSON.parse(localStorage.getItem('userInfo') || "{}"));
console.log(userInfo.value);
const handleFileChange = () => {
    const file = fileInput.value.files[0];
    console.log(file);
    if (file) {
        const reader = new FileReader();
        reader.onload = (e: any) => {
            console.log(e.target.result);
            console.log(userInfo.value);
            userInfo.value.avatar = e.target.result;
            console.log(userInfo.value.avatar);
            localStorage.setItem('userInfo', JSON.stringify(userInfo.value));
        }
        reader.readAsDataURL(file);
        console.log(file);
    }
};
</script>

<style lang="scss" scoped>
.bing {
    position: absolute;
    width: 100%;
    height: 200px;
    background-color: #f7f7f7;

    .bingren {
        position: absolute;
        width: 98%;
        height: 100px;
        background-color: white;

        p {
            position: absolute;
            left: 30px;
            top: 10px;
        }

        .p1 {
            position: absolute;
            left: 30px;
            top: 60px;
        }
    }
}

.btn {
    position: fixed;
    top: 680px;
    width: 90%;
    left: 3%;
    height: 50px;
    color: white;
    background-color: #39d167;
    border: none;
    outline: none;
}
:deep(.van-tabs__line) {
    position: absolute;
    bottom: 15px;
    left: 0;
    z-index: 1;
    background: #39d167;
    border-radius: var(--van-tabs-bottom-bar-height);
}
</style>